<template>
<div>
  <div class="photo" :style="note">
    <img class="photo-img" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
    <ul class="photo-text">
      <li>王大锤</li>
      <li>17812018553</li>
    </ul>
  </div>
  <van-row class="box">
    <van-col class="box-item" span="8">
      <span class="box-item-num">13</span>
      <span class="box-item-text">我的消息</span>
    </van-col>
    <van-col class="box-item" span="8">
      <span class="box-item-num">13</span>
      <span class="box-item-text">待上传任务</span>
    </van-col>
      <van-col span="8">
      <span class="box-item-num">13</span>
      <span class="box-item-text">待下载任务</span>
    </van-col>
  </van-row>
</div>
</template>

<script>
export default {
  name: 'MySelfTop',
  props: {
    list: Array
  },
  data () {
    return {
      note: {
        backgroundImage: 'url(' + require('@/assets/Group6.png') + ')'
      },
      beiwangUrl: require('@/assets/工作信息.png'),
      qiandaoUrl: require('@/assets/签到.png')
    }
  },
  methods: {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='stylus' scoped>
.photo
  width 100%
  height 2.5rem
  background-repeat no-repeat
  background-size 100% auto
  padding-top: .4rem;
  .photo-img
    float left
    width 1.8rem
    height 1.8rem
    border-radius 50%
    margin-left .4rem
  .photo-text
    float left
    line-height .8rem
    margin-left .2rem
    font-family: MicrosoftYaHei;
    font-size: 26px;
    color: #FFFFFF;
    letter-spacing: -0.51px;
.box
  line-height .65rem
  text-align center
  font-family: MicrosoftYaHei;
  font-size: 20px;
  // border 1px solid black
  .box-item
   border-right: 2px solid #ddd;
  .box-item-num
    display block
  .box-item-text
    color #c5bebe
</style>
